//商品匹配规则
import { useState, useEffect } from 'react';
import { Switch, message } from 'antd';
import CommonLoading from '@/components/CommonLoading';
import { queryGoodsCodeSwitch, setGoodsCodeSwitch } from '../service';
import styles from './index.module.less';

//商品规则
const GoodsMatchRules = () => {
  const [loading, setLoading] = useState(false);
  const [checked, setChecked] = useState(false);

  useEffect(() => {
    getStatusWhenInit();
  }, []);

  //获取商品规则是否允许匹配
  const getStatusWhenInit = async () => {
    setLoading(true);
    const { data = false, success } = await queryGoodsCodeSwitch();
    if (success) {
      setChecked(data);
    }
    setLoading(false);
  };

  //切换商品规则状态
  const handleSwitch = async (e) => {
    setLoading(true);
    const { success, msg } = await setGoodsCodeSwitch({ type: e ? 1 : 0 });
    if (success) {
      message.success(msg);
      getStatusWhenInit();
    }
    setLoading(false);
  };

  return (
    <div style={{ marginTop: '20px' }}>
      <div className={styles.title}>2. 商品匹配规则</div>
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <span>商品编码一致，是否允许匹配不同的商品：</span>
        <Switch
          checkedChildren="是"
          unCheckedChildren="否"
          checked={checked}
          style={{ margin: '6px' }}
          onClick={(e) => handleSwitch(e)}
          size="default"
        />
      </div>
      <p>注意：</p>
      <p>
        ①若选择“否”，则自动、手动修改匹配或解除匹配，相同商品编码的网店商品或系统商品则会一起变化
      </p>
      <p>
        ②若选择“是”，则自动、手动修改匹配或解除匹配，只修改当前这个商品，对其他商品无影响
      </p>
      <CommonLoading loading={loading} />
    </div>
  );
};

export default GoodsMatchRules;
